<template>
	<div id="public_layoutMainContainer" class="">
		<!-- 搜索 -->
		<div class="public_searchContainer">
			<el-form ref="searchFormRef" :inline="true" :model="searchForm">
				<el-row :gutter="20">
					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100" label="角色名称">
							<el-input v-model="searchForm.name" placeholder="请输入角色名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item label="角色状态" class="w-100">
							<el-select v-model="searchForm.status" placeholder="请选择角色状态" clearable>
								<el-option label="正常" value="enable" />
								<el-option label="停用" value="disable" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24" :sm="12" :md="8" :lg="6" :xl="4">
						<el-form-item class="w-100 searchOperateFormItem">
							<el-button type="primary" @click="getData">查询</el-button>
							<el-button @click="resetSearchForm">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<!-- 操作栏 -->
		<div class="public_operateContainer">
			<el-button type="primary" @click="openAddDialog">新增角色</el-button>
		</div>

		<!-- 表格 -->
		<el-table class="public_tableContainer" v-loading="dataConfig.loading" :data="dataConfig.data" border>
			<el-table-column prop="name" label="角色名称" />
			<el-table-column prop="key" label="权限字符" />
			<el-table-column prop="status" label="状态" width="100" align="center">
				<template #default="{ row }">
					<el-tag v-if="row.status === 'enable'" disable-transitions type="primary">正常</el-tag>
					<el-tag v-if="row.status === 'disable'" disable-transitions type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间">
				<template #default="{ row }">{{ moment(row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="更新时间">
				<template #default="{ row }">{{ moment(row.updatedAt).format("YYYY-MM-DD HH:mm:ss") }}</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button v-if="row.key !== 'super_admin'" type="primary" link @click="openEditDialog(row)">编辑</el-button>
					<el-button v-if="row.key !== 'super_admin'" type="primary" link @click="openRemoveDialog(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination
			class="public_paginationContainer"
			v-model:current-page="pagingConfig.page"
			v-model:page-size="pagingConfig.size"
			:total="pagingConfig.total"
			layout="sizes, prev, pager, next, jumper"
			background
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>

	<!-- 删除确认Dialog -->
	<removeConfirmDialog ref="removeDialogRef" />
	<addAndEditDialog ref="addAndEditDialogRef" :fullData="fullData" @updateFullData="getData({ isUpdateFullData: true })" />
</template>

<script setup name="system_department">
import { ref, reactive, onMounted } from "vue";
import { getRoleApi, deleteRoleApi } from "@/api/system/role";
import moment from "moment";
import removeConfirmDialog from "@/components/confirmDialog/index.vue";
import addAndEditDialog from "./components/addAndEditDialog.vue";

// 搜索
const searchFormRef = ref();
const searchForm = ref({ name: undefined, status: undefined });
// 重置
const resetSearchForm = () => {
	searchForm.value = { name: undefined, status: undefined };
	pagingConfig.page = 1;
	getData({ isUpdateFullData: true });
};

// 完整的数据,如果你可能会对dataConfig中的数据进行修改,并且子组件需要使用完整的数据,则可以传递它.
const fullData = ref([]);
// 表格
const dataConfig = reactive({
	loading: false,
	data: [],
});
const getData = async ({ isUpdateFullData = false } = {}) => {
	dataConfig.loading = true;
	try {
		const res = await getRoleApi({ ...searchForm.value, ...pagingConfig, total: undefined });
		dataConfig.data = res.data.data;
		pagingConfig.total = res.data.total;

		if (isUpdateFullData) fullData.value = res.data.data;
	} finally {
		dataConfig.loading = false;
	}
};

// 分页
const pagingConfig = reactive({
	page: 1,
	size: 10,
	total: 0,
});
const handleSizeChange = (val) => {
	pagingConfig.size = val;
	getData();
};
const handleCurrentChange = (val) => {
	pagingConfig.page = val;
	getData();
};

// 新增|删除|编辑_弹窗Ref
const removeDialogRef = ref();
const addAndEditDialogRef = ref();
// 删除数据
const openRemoveDialog = (row) => {
	removeDialogRef.value.open({
		title: "删除角色",
		content: `确定删除[${row.name}]角色吗？`,
		isAsync: true,
		confirm: async ({ stopLoading, done }) => {
			try {
				await deleteRoleApi({ id: row._id });
				done();
				getData({ isUpdateFullData: true });
			} catch (e) {
				stopLoading();
			}
		},
	});
};
// 新增数据
const openAddDialog = () => {
	addAndEditDialogRef.value.open();
};
// 编辑数据
const openEditDialog = (data) => {
	addAndEditDialogRef.value.open({ type: "edit", data });
};

onMounted(() => {
	getData({ isUpdateFullData: true });
});
</script>

<style scoped lang="scss"></style>
